<template>
<!-- 创建场地 -->
	<div>
    <div v-show="mainConState">
      <Header></Header>
          <!--创建场地开始-->
      <div class="editBox w1200 bc b87 bg100 pb50 mt30 mb30 " >
        <h1 class="w h40 bg95 c_grn_119c5b fb f14 lh40 bb87 pointer" style="text-align: left;"><img src="/static/images/write.png" class="ml20 mr10 vm">发布场地</h1>
        <table class=" edit_tb f14 lh24 mt40  ml50 mr50">
            <col class="w140"/>
            <col />
        <!--场地地址-->
          <td class="tr vt">
              <span class="inline-block c20 w100 h24 tr mr20"><i class="f14 lh24 fm_songti c_orgRed_ff481d mr5">*</i>场地地址:</span>
            </td>
            <div id="block">
              <el-select v-model="seleprovince" placeholder="请选择" @change="selectFun">
                <el-option
                  v-for="(item,index) in this.province"
                  :key="item.value"
                  :label="item.label"
                  :value="index+'|province'">
                </el-option>
              </el-select>
              <el-select v-model="selecity" placeholder="请选择" @change="selectFun">
                <el-option
                  v-for="(item,index) in this.city"
                  :key="item.value"
                  :label="item.label"
                  :value="index+'|city'">
                </el-option>
              </el-select>
              <el-select v-model="seleregin" placeholder="请选择" @change="selectFun">
                <el-option
                  v-for="(item,index) in this.Region"
                  :key="item.value"
                  :label="item.label"
                  :value="index+'|regin'">
                </el-option>
              </el-select>
            </div>
          <!--场地名称-->
          <tr >
            <td class="tr vt">
              <span class="inline-block c20 w100 h24 tr mr20"><i class="f14 lh24 fm_songti c_orgRed_ff481d mr5">*</i>场地名称:</span>
            </td>
            <td>
              <el-input v-model="addData['placeName']" class="inputName" placeholder="请输入内容"></el-input>
            </td>
          </tr>
          <!--场地类型-->
          <tr >
          <td class="tr vt">
            <span class="inline-block c20 w100 h24 tr mr20"><i class="f14 lh24 fm_songti c_orgRed_ff481d mr5">*</i>场地类型:</span>
          </td>
          <td class="vt">
            <div class="f12 lh24 c50 vm" style="height: 40px;line-height: 40px;" >
              <el-checkbox-group v-model="checkList" @change="selePlaceType">
                <el-checkbox v-for="list in TypeList" :label="list.typeName" :key="list.id"></el-checkbox>
              </el-checkbox-group>
            </div>
          </td>
        </tr>
        <tr >
          <td class="tr vt">
            <span class="inline-block c20 w100 h24 tr mr20"><i class="f14 lh24 fm_songti c_orgRed_ff481d mr5">*</i>场地标签:</span>
          </td>
          <td class="vt">
            <div class="f12 lh24 c50 vm" style="height: 40px;line-height: 40px;" >
              <el-checkbox-group v-model="tagcheckList" @change="selePlaceTag">
                <el-checkbox v-for="list in tags" :label="list.typeName" :key="list.id"></el-checkbox>
              </el-checkbox-group>
            </div>
          </td>
        </tr>
          <!--困难系数-->
          <tr>
            <td class="tr vt">
              <span class="inline-block c20 w100 h24 tr mr20"><i class="f14 lh24 fm_songti c_orgRed_ff481d mr5">*</i>困难系数:</span>
            </td>
            <td>
              <div class="block">
                  <el-select v-model="addData['difficulty']" placeholder="请选择"  @change="seleDiff">
                    <el-option
                    v-for="item in difficultys"
                    :key="item.id"
                    :label="item.typeName"
                    :value="item.id">
                    </el-option>
                  </el-select>
                    <!-- {{value1}} -->
              </div>
            </td>
          </tr>
          <!--添加场地入口-->
          <tr>
            <td class="tr vt " style="padding-bottom:0;">
              <span class="inline-block c20 w100 h24 tr mr20"><i class="f14 lh24 fm_songti c_orgRed_ff481d mr5">*</i>场地入口:</span>
            </td>
            <td class="clearfix vt pb10" style="padding-bottom:0;">
              <a @click="showAlert" class="fl f12 c40 addIcon h24 pl40 pr20 mr20 mb20 b_grn_119c5b br2 pointer margintop" id="addEntryBtn">继续添加</a>
              <a v-for="(list,index) in addData['placeentryInfoList']" class="fl f12 h24 pl20 pr20 mr20 mb20  bg_grn_119c5b br2 fm_songti  lh24 c100 pr hoverbg_org margintop pointer entryList" @click="editEntry(index)">{{list['entryName']}} <i @click="removeBtn(index)" class="redCloseX"></i></a>
            </td>
          </tr><!--场地入口结束-->
          <!--场地入口弹出框-->
          <tr class="" v-show="showalert">
            <td class="tr vt"></td>
            <td>
              <!--场地 弹出框-->
                <div class="fl pr p20 pt40 br2 bg100 b_org_f16113" id="entryAlertBox">
                  <img  class="pa orgArr_up" id="iconUpIcon" src="static/images/org_arrow_up.png" width="28" height="18"/>
                  <table class="pr60 ">
                    <tr>
                      <td class="tr vt">
                        <span class="inline-block c20 w100 h24 mr20">入口名称:</span>
                      </td>
                      <td>
                        <el-input v-model="entryName" class="inputName" placeholder="请输入内容"></el-input>
                      </td>
                    </tr>
                    <tr>
                      <td class="tr vt">
                        <span class="inline-block c20 w100 h24 mr20">选择入口:</span>
                      </td>
                      <td class="MapBox">
                        <!-- <el-input v-model="place" @change="mapSearch" class="inputName" placeholder="请输入内容"></el-input> -->
                        <div id="mapContainer" class="fl w400 h200  f12 lh24 c40 t1 b87" ></div>
                        <div id="tip">
                            <input type="text" id="keyword" name="keyword" v-model="searchKeyWord" value="请输入关键字：(选定后搜索)" onfocus='this.value=""'  @change="searchMap"/>
                        </div>
                        <div>
                          <span>经度</span><input type="number" class="lng_lat_input h30 lh30" v-model="entryLng" @change="getAddress">
                          <span>纬度</span><input type="number" class="lng_lat_input h30 lh30" v-model="entryLat" @change="getAddress">
                        </div>
                      </td>
                    </tr>
                    <tr>
                      <td class="tr vt">
                        <span class="inline-block c20 w100 h24 mr20">详细地址:</span>
                      </td>
                      <td>
                        <el-input class="inputText" placeholder="请输入内容" v-model="entryDetailAddress"></el-input>
                      </td>
                    </tr>
                    <tr>
                      <td class="tr vt">
                        <span class="inline-block c20 w100 h24 mr20">入口描述:</span>
                      </td>
                      <td>
                        <el-input type="textarea" v-model="entryDesc"></el-input>
                      </td>
                    </tr>
                    <tr>
                      <td class="tr vt">
                        <span class="inline-block c20 w100 h24 mr20">入口图片：</span>
                      </td>
                      <td>
                        <div>
                          <wwUpload @reloadImg="reloadImg" @uploadStateFun="uploadStateFun"></wwUpload>
                          <ul class="UploadList" v-show="entryPics != null && entryPics.length>0">
                            <li v-for="(item, index) in entryPics">
                              <img :src="item['fileName']" alt="">
                              <textarea name="" id="" cols="30" rows="10" v-model="item['description']"></textarea>
                              <span class="delShow" @click="deleteFile(index)">删除</span>
                            </li>
                          </ul>
                        </div>
                      </td>
                    </tr>
                    <!--确定按钮-->
                    <tr>
                      <td class="tr vt">
                        <span class="inline-block c20 w100 h24 mr20"></span>
                      </td>
                      <td>
                        <a @click="addField" class="inline-block w100 h24 fm f12 c50 lh24 tc letter2 bg95 b87 b2 hoverbg_orgred entrySure">确定</a>
                      </td>
                    </tr>
                  </table>
                </div><!--场地 弹出框结束-->
            </td>
          </tr>

          <!--场地入口弹出框结束-->

          <!--场地介绍-->
          <tr>
            <td class="tr vt">
              <span style="text-align:right" class="inline-block c20 w100 h24 mr20">场地介绍:</span>
            </td>
            <td class="clearfix vt">
              <Ue @jsonDetail = "jsonDetail" :json-description = "addData['jsonDescription']" v-if="showUe" :type="'place'"></Ue>
              <!--<textarea class="w602 b87 br2 f14 lh180 h372 p10" name="#" rows="" cols="" placeholder="请输入场地介绍，500字以内" v-model="addData['summary']"></textarea>-->
            </td>
          </tr>
          <tr>
            <td class="tr vt">
              <span style="text-align:right" class="inline-block c20 w100 h24 mr20">场地介绍图:</span>
            </td>
            <td class="clearfix vt">
              <wwUpload @reloadImg="reloadIntroducePic" @uploadStateFun="uploadStateFun"></wwUpload>
              <ul class="UploadList" v-show="addData['icon'] != null && addData['icon'].length>0">
                <li v-for="(item, index) in addData['icon']">
                  <img :src="item['fileName']" alt="">
                  <textarea name="" cols="30" rows="10" v-model="item['description']"></textarea>
                  <span class="delShow" @click="deleteIcon(index)">删除</span>
                </li>
              </ul>
            </td>
          </tr>
          <!--经典线路-->
          <tr>
            <td class="tr vt" style="padding-bottom:0;">
              <span style="text-align:right" class="inline-block c20 w100 h24 mr20">经典线路:</span>
            </td>
            <td class="pb5 clearfix vt" style="padding-bottom:0;">
              <a class="fl f12 c40 addIcon h24 pl40 pr20 mr20 mb20 b_grn_119c5b br2 pointer margintop" @click="addRoute">继续添加</a>
            </td>
          </tr>
          <!--添加经典线路弹出框-->
          <tr class="" v-show="routeAlert">
            <td class="tr vt" style="padding-bottom:20px"></td>
            <td style="padding-bottom:20px">
              <!--经典线路 弹出框-->
                <div class="fl pr p20 pr60 pt40 br2 bg100 b_org_f16113">
                  <img  class="pa orgArr_up" src="static/images/org_arrow_up.png" width="28" height="18"/>
                  <table class="" style="width:500px;">
                    <tr>
                      <td class="tr vt">
                        <span class="inline-block c20 w110 h24 mr20">路线标题:</span>
                      </td>
                      <td>
                        <el-input v-model="routeName" class="inputText" placeholder="请输入内容"></el-input>
                      </td>
                    </tr>
                    <tr>
                      <td class="tr vt">
                        <span class="inline-block c20 w110 h24 mr20">上传图片/视频：</span>
                      </td>
                      <td>
                        <wwUpload @reloadImg="reloadRoutePic" @uploadStateFun="uploadStateFun"></wwUpload>
                        <ul class="UploadList" v-show="routePics.length>0">
                          <li v-for="(item, index) in routePics">
                            <p class="playBtn" v-if="item.flag==2"></p>
                            <img :src="(item.flag==1)?item['fileName']:item['thumFileName']" alt="">
                            <textarea name="" cols="30" rows="10" v-model="item['description']"></textarea>
                            <span class="delShow" @click="deleteRoutPic(index)">删除</span>
                          </li>
                        </ul>
                      </td>
                    </tr>
                    <!--添加按钮-->
                    <tr>
                      <td class="tr vt ">
                        <span class="inline-block c20 w100 h24 mr20"></span>
                      </td>
                      <td>
                        <a  class="inline-block w100 h24 fm f12 c50 lh24 tc letter2 bg95 b87 b2 hoverbg_orgred RouteSureBtn" @click="routeSureFun">添加</a>
                      </td>
                    </tr>
                  </table>
                </div><!--场地 弹出框结束-->
            </td>
          </tr>
          <!--添加好的线路图-->
          <tr v-for="(RouteInfo, index) in addData['placerouteInfoList']" style="border-bottom:1px solid #fff;">
            <td class="tr vt" style="padding-bottom:20px">
              <span class="inline-block c20 w100 h24 mr20"></span>
            </td>
            <td style="padding:10px;background:#eee;" class="pr">
                <h4 class="fb mb10">线路{{index+1}}：{{RouteInfo['description']}}</h4>
                <div class="fl w100 mr20 mb10 pr" v-for="(pic, picI) in RouteInfo['resourceInfoList']">
                  <a  class="block  w100 h60 pr"><img :src="(pic['flag']==1)?pic['fileName']:pic['thumFileName']" width="100" height="60"/><i class="redCloseX" @click="deleteRoutePics(index,picI)"></i></a>
                  <h5 class="mt5 fm_songti f12 lh150 c20 tc overflow">{{pic['description']}}</h5>
                  <p class="playBtn routePlayBtn" v-if="pic['flag']==2"></p>
                </div>
                <i class="redCloseX" @click="deleteRoute(index)"></i>
            </td>
          </tr>
          <!--添加向导-->
          <tr>
            <td class="tr vt " style="padding-bottom:0;">
              <span class="inline-block c20 w100 h24 tr mr20">添加向导:</span>
            </td>
            <td class="pb5 clearfix vt" style="padding-bottom:0;">
              <a  class="fl f12 c40 addIcon h24 pl40 pr20 mr20 mb20 b_grn_119c5b br2 pointer margintop"  @click="addGuide">继续添加</a>
              <a v-for = "(item,index) in addData['placeguideInfoList']" class="fl f12 h24 pl20 pr20 mr20 mb20  bg_grn_119c5b br2 fm_songti  lh24 c100 pr hoverbg_org margintop pointer guideList" @click="editGuide(index)">{{item['guideName']}}<i class="redCloseX" @click="delGuide(index)"></i></a>
            </td>
          </tr><!--添加结束-->
          <!--添加向导弹出框-->
          <tr class="" v-show="guideAlert">
            <td class="tr vt"></td>
            <td >
              <!--向导 弹出框-->
                <div class="fl pr p20 pr60 pt40 br2 bg100 b_org_f16113" id="guideAlertBox">
                  <img  class="pa orgArr_up" src="static/images/org_arrow_up.png" id="guideUpIcon" width="28" height="18"/>
                  <table class="pr60">
                    <tr>
                      <td class="tr vt">
                        <span class="inline-block c20 w100 h24 mr20">名字：</span>
                      </td>
                      <td>
                        <el-input
                          placeholder="请输入名字"
                          v-model="guidePeopleName"
                          clearable>
                        </el-input>
                      </td>
                    </tr>
                    <tr>
                      <td class="tr vt">
                        <span class="inline-block c20 w100 h24 mr20">联系方式：</span>
                      </td>
                      <td>
                        <el-input
                          placeholder="请输入手机号"
                          v-model="guideTel"
                          clearable
                          type="number">
                        </el-input>
                      </td>
                    </tr>
                    <tr>
                      <td class="tr vt">
                        <span class="inline-block c20 w100 h24 mr20">是否收费：</span>
                      </td>
                      <td>
                        <el-select v-model="guidePay" :placeholder="guidePayLabel" @change="guidePayFun">
                          <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                          </el-option>
                          </el-select>
                      </td>
                    </tr>
                    <tr v-show="guidePayState">
                      <td class="tr vt">
                        <span class="inline-block c20 w100 h24 mr20">费用：</span>
                      </td>
                      <td>
                        <el-input
                          placeholder="请输入费用"
                          v-model="guideMoney"
                          clearable
                          type="number">
                        </el-input>
                      </td>
                    </tr>
                    <!--确定按钮-->
                    <tr>
                      <td class="tr vt">
                        <span class="inline-block c20 w100 h24 mr20"></span>
                      </td>
                      <td>
                        <a  class="inline-block w100 h24 fm f12 c50 lh24 tc letter2 bg95 b87 b2 hoverbg_orgred pointer su guideSure" @click="guideSureFun">确定</a>
                      </td>
                    </tr>
                  </table>
                </div><!--向导弹出框结束-->
            </td>
          </tr><!--添加向导弹出框结束-->
          <!--创建场地按钮-->
          <tr>
            <td class="tr vt ">
              <span class="inline-block c20 w100 h24 mr20"></span>
            </td>
            <td>
              <a class="inline-block w300 h40 fm_yahei f16 fb c100 lh40 tc letter2 bg_grn_119c5b  br4 hoverbg_orgred pointer" @click="submitAllData">创建场地</a>
            </td>
          </tr>

        </table>
      </div><!--创建场地结束-->
      <Footer></Footer>
    </div>
    <Loading v-show="loadState"></Loading>
	</div>
</template>
<script>
import Header from '../../components/header'
import Footer from '../../components/footer'
import http from '../../../config/http'
import Util from '../../assets/Util'
import AMap from 'AMap'
import wwUpload from '../../components/wwUpload'
import Loading from '../../components/loading'
import Ue from '../../components/ue'
export default {
	components: {
		Header,
		Footer,
    wwUpload,
    Loading,
    Ue
	},
	data () {
		return {
					// 添加场地
          showUe:false,
          loadState:true,
          mainConState:false,
					btnName:'',
					addName:'',
					inputText:'',
					addTitle:'',
					lists:[],
					checkList:[],
          tagcheckList:[],
					province:[],
					city:[],
					Region:[],
					TypeList:[],
          difficultys:[],
          allArea:[],
					entryName:"",
          entryLng:0,
          entryLat:0,
          entryDetailAddress:"",
          entryPics:[],
          entryDesc:"",
					show:false,
          uploadUrl:http.defaults.baseURL + "/Upload/UploadImg",
          uploadHeaders:{
            client:"pc"
          },
          uploadData:{
					  "token":localStorage.getItem("token"),
            "type":0,
            "clientType": "pc"
          },
					showalert:false,
            // 图片上传
					dialogImageUrl: "",
					dialogVisible: false,
					value1:"",
					value2:"",
          seleprovince:"",
          selecity:"",
          seleregin:"",
          seleprovinceid:"",
          selecityid:"",
          selereginid:"",
          seleprovinceIndex:0,
          selecityIndex:0,
          tags:[],
				// 	options: [{
        //   value: 'zhinan',
        //   label: '指南',
        //   children: [{
        //     value: 'shejiyuanze',
        //     label: '设计原则',
        //     children: [{
        //       value: 'yizhi',
        //       label: '一致'
        //     }]
        //   }]
        // }],
				// selectedOptions: [],
					options: [
						{value:"0", label:"免费"},
						{value:"1", label:"现场支付"}
					],
          placeInfo:"",
          amap:null,
          myMap:null,
          mark:null,
          searchKeyWord:"请输入关键字：(选定后搜索)",
          editEntryIndex:-1,
          routeAlert:false,
          routePics:[],
          routeName:"",
          guideAlert:false,
          guidePeopleName:"",
          guideTel:"",
          guidePay:"",
          guideMoney:"",
          guidePayState:false,
          guidePayLabel:"请选择",
          guideInfoIndex:-1,
          addData: {
            "token": localStorage.getItem("token"),
            "placeName": "",
            "countryID": 0,
            "provinceID": 0,
            "cityID": 0,
            "regionID": 0,
            "address": "",
            "summary": "",
            "placeTypeIDs": "",
            "difficulty": null,
            "description": "",
            "icon": [],
            "placeentryInfoList": [],
            "placerouteInfoList": [],
            "placeguideInfoList": [],
            "userID": localStorage.getItem("uId"),
            "specialDisplay": [],
            "motionIDs": "",
            "jsonDescription": "",
            "placeTagIDs":""
          }
		}
	},
	mounted(){
		this.getArea();
		this.getPlaceTags();
		this.init();
		this.$nextTick(() => {
		  this.editPlace();
    })
	},
  methods: {
			// 展示场地添加框
			showAlert(){
        if(this.showalert){
          this.showalert = false
        }else{
				  this.editEntryIndex = -1;
          this.entryName = "";
          this.entryDetailAddress = "";
          this.entryLng = 0;
          this.entryLat = 0;
          this.entryPics = [];
          this.entryDesc = "";
          this.init();
          let Left = document.getElementById("addEntryBtn").offsetLeft;
          let entryAlertBox = document.getElementById("entryAlertBox");
          let BoxLeft = entryAlertBox.offsetLeft;
          let IconLeft = Left - BoxLeft + 10;
          document.getElementById("iconUpIcon").style.left = IconLeft + "px";
          this.showalert = true;
        }
			},
      // 编辑场地
      editPlace(){
			 let that = this;
			 let placeId = this.$route.query.id;
        if(placeId){
            // 基础信息参数
            let props = {
              url:'/Place/GetDetails',
              data:{
                "id": this.$route.query.id,
                "userID": localStorage.getItem("uId")
              },
              sCallBack: res => {
                if(res.data.code === 1){
                  let placeInfo = res.data.data;
                  this.seleprovince = placeInfo['province'];
                  this.selecity = placeInfo['city'];
                  this.seleregin = placeInfo['region'];
                  this.addData.placeName = placeInfo['placeName'];
                  this.checkList = placeInfo['placeTypeName'].split(',');
                  this.tagcheckList = placeInfo['placeTagName'].split(',');
                  this.addData['difficulty'] = placeInfo['difficulty'];
                  this.addData['placeentryInfoList'] = placeInfo['listEntry'];
                  this.addData['jsonDescription'] = placeInfo['jsonDescription'];
                  this.addData['placeTypeIDs'] = placeInfo['placeTypeIDs'];
                  this.addData['placeTagIDs'] = placeInfo['placeTagIDs'];
                  for (let i = 0; i < placeInfo['listSummaryImage'].length; i++){
                      placeInfo['listSummaryImage'][i]['flag'] = 1;
                  }
                  this.addData['icon'] = placeInfo['listSummaryImage'];
                  this.showUe = true;
                  setTimeout(() => {
                    that.getIdByName(that.seleprovince, that.selecity, that.seleregin);
                  }, 2000)
                }else{
                  this.$message.error("请求数据出错，稍后再试");
                }
              },
              eCallBack:err => {
                console.log(err);
              }
            }
            // 线路信息参数
            let routeProps = {
              url:'/Place/GetRouteList',
              data:{
                "placeID": this.$route.query.id
              },
              sCallBack: res => {
                if(res.data.code === 1){
                  this.addData['placerouteInfoList'] = res.data.data;
                }else{
                  this.$message.error("请求数据出错，稍后再试");
                }
              },
              eCallBack:err => {
                console.log(err);
              }
            }
            // 向导信息参数
            let guideProps = {
              url:"/Place/GetGuideList",
              data:{
                "placeID": this.$route.query.id
              },
              sCallBack: res => {
                if(res.data.code === 1){
                  this.addData['placeguideInfoList'] = res.data.data;
                }else{
                  this.$message.error("请求数据出错，稍后再试");
                }
              },
              eCallBack:err => {
                console.log(err);
              }
            }
            Util.myRequest(props);
            Util.myRequest(routeProps);
            Util.myRequest(guideProps);
        }else{
          this.showUe = true;
        }
      },
      // 编辑场地入口
      editEntry(index){
          this.editEntryIndex = index;
          let entryArr = this.addData['placeentryInfoList'][index];
          this.entryName = entryArr['entryName'];
          this.entryDesc = entryArr['description'];
          this.entryDetailAddress = entryArr['address'];
          this.entryLat = entryArr['lat'];
          this.entryLng = entryArr['lng'];
          this.entryPics = entryArr['resourceInfoList'];
          this.init();
          this.showalert = true;
          this.$nextTick(function () {
            let entryLists = document.getElementsByClassName("entryList");
            let entryAlertBox = document.getElementById("entryAlertBox");
            let Left = entryLists[index].offsetLeft;
            let BoxLeft = entryAlertBox.offsetLeft;
            let IconLeft = Left - BoxLeft + 10;
            document.getElementById("iconUpIcon").style.left = IconLeft + "px";
          });
      },
			// 添加场地
			addField(){
				if(this.entryName === ""){
          this.$message.warning("入口名字不能为空");
          return false;
        }
        if (this.entryDetailAddress === ""){
          this.$message.warning("入口详细地址不能为空");
          return false;
        }
        if (this.entryLng === 0 || this.entryLat === 0){
          this.$message.warning("请在地图选择标记点");
          return false;
        }
        this.showalert = false
        let EntryInfo = {
          "entryName": this.entryName,
          "address": this.entryDetailAddress,
          "lng": this.entryLng,
          "lat": this.entryLat,
          "resourceInfoList": this.entryPics,
          "description": this.entryDesc
        }
        if (this.editEntryIndex === -1){
          this.addData.placeentryInfoList.push(EntryInfo);
        }else{
          this.addData.placeentryInfoList[this.editEntryIndex] = EntryInfo;
        }
			},
			// 移除场地标签
			removeBtn(index){
        event.stopPropagation();
				this.addData['placeentryInfoList'].splice(index, 1);
			},
			// 获取热门省市区
			getArea(){
			  let that = this;
        let areaProps = {
          url:"/Common/GetArea",
          sCallBack:(res) => {
            let item = res.data.data.listProvince;
            that.allArea = item;
            item.forEach(element => {
              that.province.push({'label':element.name, 'value':element.id})
            });
            that.loadState = false;
            that.mainConState = true;
          },
          eCallBack:(err) => {
            console.log(err);
          }
        }
			  Util.myRequest(areaProps);
			},
      // 选择地址
      selectFun(e){
        let eArr = e.split("|");
        let index = eArr[0];
        let name = eArr[1];
        let that = this;
        switch (name) {
          case "province":
            let cityArr = that.allArea[index]["data"];
            that.city = [];
            cityArr.forEach(element => {
              that.city.push({'label':element.name, 'value':element.id})
            });
            that.seleprovinceIndex = index;
            that.addData.provinceID = that.allArea[index]["id"];
            that.selecity = "请选择";
            that.seleregin = "请选择";
            that.Region = [];
            break;
          case "city":
            let reginArr = that.allArea[that.seleprovinceIndex]["data"][index]['data'];
            that.Region = [];
            reginArr.forEach(element => {
              that.Region.push({'label':element.name, 'value':element.id})
            });
            that.selecityIndex = index;
            that.addData.cityID = that.allArea[that.seleprovinceIndex]["data"][index]['id'];
            that.seleregin = "请选择";
            break;
          case "regin":
            that.addData.regionID = that.allArea[that.seleprovinceIndex]["data"][that.selecityIndex]['data'][index]['id'];
            let seleProvinceIndex = that.seleprovince.split("|")[0];
            let seleCityIndex = that.selecity.split("|")[0];
            let seleReginIndex = that.seleregin.split("|")[0];
            let address = that.allArea[seleProvinceIndex]['name'] + "-" + that.allArea[seleProvinceIndex]['data'][seleCityIndex]['name'] + "-" + that.allArea[seleProvinceIndex]['data'][seleCityIndex]['data'][seleReginIndex]['name'];
            that.addData.address = address;
            break;
        }
      },
			// 获取类型列表
      getPlaceTags(){
        let that = this;
        let tagProp = {
          url:"/Place/ListPlaceType",
          sCallBack:(res) => {
            that.tags = res.data.data['tagDetails'];
            that.difficultys = res.data.data['difficultyDetails'];
            that.TypeList = res.data.data['typeDetails'];
          },
          eCallBack:(err) => {
            console.log(err);
          }
        }
        Util.myRequest(tagProp);
      },
      // 选择产地类型
      selePlaceType(e){
          let placeTypeIds = "";
          for (let i = 0, j = e.length; i < j; i++) {
            for (let n = 0, m = this.TypeList.length; n < m; n++) {
              if (e[i] === this.TypeList[n]['typeName']) {
                (placeTypeIds === "") ? placeTypeIds = this.TypeList[n]['id'] : placeTypeIds += "," + this.TypeList[n]['id'];
              }
            }
          }
          this.addData.placeTypeIDs = placeTypeIds;
      },
      // 选择场地标签
      selePlaceTag(e){
        let placeTagIds = "";
        for (let i = 0, j = e.length; i < j; i++){
          for (let n = 0, m = this.tags.length; n < m; n++){
            if (e[i] === this.tags[n]['typeName']){
              (placeTagIds === "") ? placeTagIds = this.tags[n]['id'] : placeTagIds += "," + this.tags[n]['id'];
            }
          }
        }
        this.addData.placeTagIDs = placeTagIds;
      },
      // 选择困难系数
      seleDiff(e){
          this.addData.difficulty = e;
          // console.log(e);
      },
      // searchMap(){
      //     var address = this.entryName;
      // },
			// 重置高德地图
			init(){
        let that = this;
        let MapConfig = this.entryLng === 0 ? {
          resizeEnable: true,
          zoom: 10, // 地图显示的缩放级别
          keyboardEnable: false
        } : {
          resizeEnable: true,
          center: [that.entryLng, that.entryLat],
          zoom: 10, // 地图显示的缩放级别
          keyboardEnable: false
        };
				let map = new AMap.Map("mapContainer", MapConfig);
        let marker = new AMap.Marker({
          position: map.getCenter(),
          draggable: true,
          cursor: 'move',
          raiseOnDrag: true
        });
        that.myMap = map;
        that.mark = marker;
        marker.setMap(map);
        map.on('click', function(e){
          that.entryLat = e.lnglat.getLat();
          that.entryLng = e.lnglat.getLng();
          marker.setPosition([e.lnglat.getLng(), e.lnglat.getLat()]);
          map.plugin('AMap.Geocoder', function() {
            var geocoder = new AMap.Geocoder({
              city: '010'
            })
            let lnglat = [that.entryLng, that.entryLat]
            geocoder.getAddress(lnglat, function(status, result) {
              if (status === 'complete' && result.info === 'OK') {
                that.entryDetailAddress = result.regeocode.formattedAddress
               }
            })
          })
        });
        this.amap = map;
			},
      // 通过经纬度获取地址
      getAddress(){
			  let that = this;
        let lnglat = [this.entryLng, this.entryLat];
        this.mark.setPosition(lnglat)
        this.myMap.setCenter(lnglat);
        this.myMap.plugin('AMap.Geocoder', function() {
          var geocoder = new AMap.Geocoder({
            city: '010'
          });
          geocoder.getAddress(lnglat, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
              that.entryDetailAddress = result.regeocode.formattedAddress
            }
          })
        })
      },
			// 搜索位置
      searchMap(){
				let that = this
					 AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function(){
						var autoOptions = {
							city: "", // 城市，默认全国
							input: "keyword"// 使用联想输入的input的id
						};
						let autocomplete = new AMap.Autocomplete(autoOptions);
						let placeSearch = new AMap.PlaceSearch({
									pageSize: 1,
				 					pageIndex: 1,
									city:'杭州',
									map:that.amap
						})
						AMap.event.addListener(autocomplete, "select", function(e){
							placeSearch.setCity(e.poi.adcode);
							placeSearch.search(e.poi.name)
						});
					});
					AMap.service(["AMap.PlaceSearch"], function() {
					let placeSearch = new AMap.PlaceSearch({
							pageSize: 1,
							pageIndex: 1,
							city: "010",
							map: that.amap
					});
					placeSearch.search(that.searchKeyWord, function(status, result) {
						console.log(result);
					});
				});
			},
      // 添加线路
      addRoute(){
        this.routeAlert = !this.routeAlert;
      },
      // 添加向导
      addGuide(){
        this.guideInfoIndex = -1;
        this.guidePeopleName = "";
        this.guideTel = "";
        this.guidePay = "";
        this.guideMoney = "";
        this.guideAlert = !this.guideAlert;
      },
      guidePayFun(e){
        if(e == 0){
            this.guidePayState = false;
            this.guideMoney = "";
        }else{
            this.guidePayState = true;
        }
      },
      guideSureFun(){
        let zergTel = /^1(3|4|5|7|8)\d{9}$/;
        if (this.guidePeopleName === "") {
          this.$message.warning("请填写向导名字");
          return false;
        }
        if (this.guideTel === "" || !zergTel.test(this.guideTel)) {
          this.$message.warning("请填写正确的向导手机号");
          return false;
        }
        if (this.guidePay === "") {
          this.$message.warning("请选择是否收费");
          return false;
        }
        if (this.guidePay == 1 && this.guideMoney === "") {
          this.$message.warning("请填写费用");
          return false;
        }
        let guideInfo = {
            "guideName": this.guidePeopleName,
            "moblile": this.guideTel,
            "cost": this.guidePay,
            "costAmount": this.guideMoney
          }
        if(this.guideInfoIndex === -1){
          this.addData.placeguideInfoList.push(guideInfo);
        }else{
          this.addData.placeguideInfoList[this.guideInfoIndex] = guideInfo;
        }
        this.guideAlert = false;
      },
      // 删除向导
      delGuide(index){
        event.stopPropagation();
        this.addData['placeguideInfoList'].splice(index, 1);
      },
      // 编辑向导
      editGuide(index){
          let guideInfo = this.addData['placeguideInfoList'][index];
          this.guidePeopleName = guideInfo['guideName'];
          this.guideTel = guideInfo['moblile'];
          this.guidePayState = guideInfo['cost'] != 0;
          this.guidePay = guideInfo['cost'];
          this.guidePayLabel = guideInfo['cost'] == 0 ? "免费" : "现场支付";
          this.guideMoney = guideInfo['costAmount'];
          this.guideAlert = true;
          this.guideInfoIndex = index;
          this.$nextTick(function () {
            let guideLists = document.getElementsByClassName("guideList");
            let guideAlertBox = document.getElementById("guideAlertBox");
            let Left = guideLists[index].offsetLeft;
            let BoxLeft = guideAlertBox.offsetLeft;
            let IconLeft = Left - BoxLeft + 10;
            document.getElementById("guideUpIcon").style.left = IconLeft + "px";
          });
      },
      // 更新上传的图片
      reloadImg(data){
        this.loadState = false;
        let upInfo = data.files;
        let entryPic = {};
        if(upInfo.flag !== 1){
          this.$message.warning("上传格式不正确");
        }else{
          let img = new Image();
          img.src = upInfo['url'];
          img.onload = function(){
            entryPic['imgWidth'] = img.width;
            entryPic['imgHeight'] = img.height;
          };
          entryPic['fileName'] = upInfo['url'];
          entryPic['flag'] = 1;
          entryPic['thumFileName'] = "";
          entryPic['description'] = "";
          entryPic['length'] = 0;
          this.entryPics.push(entryPic);
        }
      },
      // 删除上传的图片
      deleteFile(index){
        this.entryPics.splice(index, 1);
      },
      // 加载介绍图
      reloadIntroducePic(data){
        this.loadState = false;
        let upInfo = data.files;
        if(upInfo.flag !== 1){
          this.$message.warning("上传格式不正确");
          return false;
        }
        let icon = {
          "fileName": upInfo['url'],
          "flag": "1",
          "description": ""
        };
        let img = new Image();
        img.src = upInfo['url'];
        img.onload = function(){
          icon['imgWidth'] = img.width;
          icon['imgHeight'] = img.height;
        };
        this.addData['icon'].push(icon);
      },
      // 删除介绍图
      deleteIcon(index){
        this.addData['icon'].splice(index, 1);
      },
      // 加载线路图
      reloadRoutePic(data){
        this.loadState = false;
        let routePic = {};
			  if(data.flag && data.flag === "2"){
          let img = new Image();
          img.src = data['thumFileName'];
          img.onload = function(){
            routePic['imgWidth'] = img.width;
            routePic['imgHeight'] = img.height;
          };
          routePic['fileName'] = data['fileName'];
          routePic['flag'] = 2;
          routePic['thumFileName'] = data['thumFileName'];
          routePic['description'] = "";
          routePic['length'] = 0;
        }else{
          let upInfo = data.files;
          let img = new Image();
          img.src = upInfo['url'];
          img.onload = function(){
            routePic['imgWidth'] = img.width;
            routePic['imgHeight'] = img.height;
          };
          routePic['fileName'] = upInfo['url'];
          routePic['flag'] = 1;
          routePic['thumFileName'] = "";
          routePic['description'] = "";
          routePic['length'] = 0;
        }
        this.routePics.push(routePic);
      },
      // 删除线路图
      deleteRoutPic(index){
			  this.routePics.splice(index, 1);
      },
      // 确定添加线路图
      routeSureFun(){
        if (this.routeName === "") {
          this.$message.warning("请填写线路名字");
          return false;
        }
        if (this.routePics.length === 0) {
          this.$message.warning("至少上传一张线路图或视频");
          return false;
        }
        let RouteInfo = {};
            RouteInfo['description'] = this.routeName;
            RouteInfo['resourceInfoList'] = this.routePics;
            RouteInfo['difficulty'] = 0;
            RouteInfo['carTypeIDs'] = "";
        this.addData.placerouteInfoList.push(RouteInfo);
        this.routeName = "";
        this.routePics = [];
        this.routeAlert = false;
      },
      // 删除已选择的线路图
      deleteRoutePics(index, picI){
          this.addData.placerouteInfoList[index]['resourceInfoList'].splice(picI, 1);
      },
      // 删除整个线路
      deleteRoute(index){
          this.addData.placerouteInfoList.splice(index, 1);
      },
      // 上传文件加载
      uploadStateFun(){
			  this.loadState = true;
      },
      jsonDetail(e){
        this.addData.jsonDescription = e.jsonStr
      },
      // 提交所有场地信息
      submitAllData(){
			  this.showState = true;
			  let that = this;
        this.addData['token'] = localStorage.getItem("token");
			  let subUrl = "";
			  let refresh = {
			    url:"/user/GetToken",
          data:{
			      token:localStorage.getItem('token')
          },
          sCallBack:(res) => {
			      localStorage.setItem("token", res.data.data)
            that.addData.token = res.data
            that.submitAllData()
          },
          eCallBack:(err) => {
			      console.log(err);
          }
        }
        if(this.$route.query.id){
          this.addData['id'] = this.$route.query.id;
          subUrl = "/Place/Update";
        }else{
          subUrl = "/Place/Add";
        }
			  let allProps = {
			    url:subUrl,
          data:this.addData,
          sCallBack:(res) => {
			      if(res.data.code === 4){
              Util.myRequest(refresh);
            }else if (res.data.code === 1) {
			        this.$message.success("提交成功");
			        this.showState = false;
			        setTimeout(function () {
                window.scrollTo(0, 0);
                that.$router.push({path:'/fieldList'});
              }, 500)
            }else{
              this.$message.warning(res.data.message + "请重新登录！");
            }
          },
          eCallBack:(err) => {
            console.log(err);
          }
        }
        let allData = this.addData;
        if(allData['token'] === ""){
          this.$message.warning("登录失效");
          return false;
        }
        if(allData['placeName'] === ""){
          this.$message.warning("请填写场地名字");
          return false;
        }
        if(allData['provinceID'] === 0){
          this.$message.warning("请选择省份");
          return false;
        }
        if(allData['cityID'] === 0){
          this.$message.warning("请选择城市");
          return false;
        }
        if(allData['regionID'] === 0){
          this.$message.warning("请选择区域");
          return false;
        }

        if(allData['placeTypeIDs'] === ""){
          this.$message.warning("请选择场地类型");
          return false;
        }
        if(allData['placeTagIDs'] === ""){
          this.$message.warning("请选择场地标签");
          return false;
        }
        if(allData['difficulty'] === ""){
          this.$message.warning("请选择难度系数");
          return false;
        }
        if(allData['jsonDescription'] === ""){
          this.$message.warning("请填写场地介绍");
          return false;
        }
        if(allData['icon'].length === 0){
          this.$message.warning("请上传场地介绍图");
          return false;
        }
        if(allData['icon'].length < 3){
          this.$message.warning("至少上传三张介绍图");
          return false;
        }
        if(allData['placeentryInfoList'].length === 0){
          this.$message.warning("请上传场地入口");
          return false;
        }
        if(allData['placerouteInfoList'].length === 0){
          this.$message.warning("请上传场地线路图");
          return false;
        }
        if(allData['placeentryInfoList'].length === 0){
          this.$message.warning("请上传产地入口");
          return false;
        }
        if(allData['userID'] === null){
          this.$message.warning("登录失效");
          return false;
        }
        Util.myRequest(allProps);
      },
      getIdByName(province, city, region){
			  let listProvince = this.allArea;
			  for (let i = 0; i < listProvince.length; i++){
            if(listProvince[i]['name'] === province){
                this.addData['provinceID'] = listProvince[i]['id'];
                let listCity = listProvince[i]['data'];
                for (let j = 0; j < listCity.length; j++){
                    if(listCity[j]['name'] === city){
                      this.addData['cityID'] = listCity[j]['id'];
                      let regionList = listCity[j]['data'];
                      for (let n = 0; n < regionList.length; n++){
                          if (regionList[n]['name'] === region){
                            this.addData['regionID'] = regionList[n]['id'];
                            console.log(regionList[n]['id']);
                          }
                      }
                    }
                }
            }
        }
      }
  }
}
</script>
<style lang="less" scoped>
//重置组件样式
.margintop{
	margin-top:8px;
}
.pointer{
	cursor: pointer;
}
#block{
   text-align: left;
}
.h24{
    // height:40px;
    // line-height: 40px;
}
.edit_tb span{
    height:40px;
    line-height: 40px;
}
.edit_tb td{
		text-align: left;
    padding-bottom: 20px;
}
.el-cascader{
    min-width:200px;
}
#app/deep/.el-upload{
    width:100px;
    height:100px;
    float:left;
}

.floatLeft{
	float:left;
}
.inputName{
	width:60%;
}
.MapBox{
  position:relative;
}
 #tip {
 		background-color: #ddf;
 		color: #333;
 		border: 1px solid silver;
 		box-shadow: 3px 4px 3px 0px silver;
 		position: absolute;
 		top: 0;
 		left: 0;
 		border-radius: 5px;
 		overflow: hidden;
 		line-height: 20px;
 	}
 	#tip input[type="text"] {
 			height: 25px;
 			border: 0;
 			padding-left: 5px;
 			width: 280px;
 			border-radius: 3px;
 			outline: none;
 	}
.entrySure,.guideSure,.RouteSureBtn{
  cursor: pointer;
}
.entrySure:hover,.guideSure:hover,.RouteSureBtn:hover{
  color:#fff;
  background:#F16113;
}
.addIcon:hover{
  border:1px solid #F16113;
}
.UploadList{
  width: 97%;
  border:1px solid #eee;
  border-radius:6px;
  padding:5px;
  background:#f0f0f0;
  margin-top:20px;
}
.UploadList li{
  margin-top:5px;
  overflow: hidden;
  position: relative;
}
.UploadList li img{
  display:block;
  width:80px;
  height:80px;
  float: left;
}
.UploadList li textarea{
  height:80px;
  float:right;
  width:75%;
  line-height:35px;
  text-indent:15px;
}
.delShow{
  width:80px;
  height:80px;
  text-align: center;
  line-height:80px;
  position:absolute;
  top:0px;
  left:0px;
  font-size:12px;
  color:#fff;
  background: rgba(0,0,0,0.4);
  opacity: 0;
}
.delShow:hover{
  opacity: 1;
  cursor: pointer;
}
.playBtn{
  left:27px;
  margin-left:0px;
}
.routePlayBtn{
  left:40px;
}
 .lng_lat_input{
   border: 1px solid #e0e3e9;
 }
</style>
